<template>
  <div class="aic" v-if="filterTabs.length > 0">
    <div style="" class="mt10 overflowX">
      筛选条件:
      <filterTag
        v-for="(item, index) in filterTabs"
        :key="index"
        :item="item"
        class="ml10"
        @handleDeleteTag="handleDeleteTag($event, index)"
      />
    </div>
    <span
      class="mt10 ml10 closeText"
      style="margin-left: 10px"
      size="small"
      @click="handleCloseAll"
      >清空</span
    >
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted } from "vue";
const emit = defineEmits(["handleDeleteTag", "handleCloseAll"]);
import filterTag from "/@/components/Filter/filterTag.vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

const state = reactive({});
function handleDeleteTag(indexValue: string, index: number) {
  emit("handleDeleteTag", indexValue, index);
}
function handleCloseAll() {
  emit("handleCloseAll");
}
defineProps({
  filterTabs: {
    type: Array,
    required: true,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
.closeText {
  cursor: pointer;
  width: 70px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(var(--color-red), var(--color-green), var(--color-blue), 1);
}
.closeText:hover {
  border-radius: 5px;
  background-color: rgba(
    var(--color-red),
    var(--color-green),
    var(--color-blue),
    0.1
  );
}
</style>
